<template>
  <div class="problemList bg-f2">
    <div class="bg-f2 bg-fff">
      <!-- <el-row :gutter="20" class="card-row">
      <el-col :span="6" style="padding:0 15px 0 0;">
        <div class="grid-content bg-purple public-content">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#el-icon-myfault" style="font-size:50px" />
          </svg>
          <ul class="card-ul">
            <li>
              <div class="contain">
                <span style="color:#F56C6C">{{shuju.GZAll}}</span>
                <span>缺失总数</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{shuju.GZTODAY}}</span>
                <span>缺失机房巡检单</span>
              </div>
            </li>
            <li>
              <div class="contain">
                <span>{{shuju.GZTODAY}}</span>
                <span>缺失系统巡检单</span>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
      </el-row>-->
      <div class="addMargin">
        <el-form :inline="true" class="formLine">
          <el-form-item class="formLine_item" label="所属机构：">
            <el-select v-model="searchBox.ssjg" :no-data-text="tiText1" clearable placeholder="选择机构">
              <el-option v-for="item in jgmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡检时间:" class="formLine_item">
            <el-date-picker
              v-model="searchBox.xjsj"
              :picker-options="pickerBeginDateBefore"
              unlink-panels
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item class="formLine_item">
            <el-button @click="onSubmit()" class="btnSizeStyle" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        border
        stripe
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        highlight-current-row
        ref="multipleTable"
        :data="contractList"
        style="width: 100%"
        :default-sort="{ prop: 'deviceName' }"
        v-loading="tableLoad"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column prop="jgmc" label="所属机构" show-overflow-tooltip min-width="120"></el-table-column>
        <el-table-column prop="xjdlx" label="缺失巡检单类型"></el-table-column>
        <el-table-column label="缺失日期" min-width="100">
          <template slot-scope="scope">{{ scope.row.qsrq | dateFormat }}</template>
        </el-table-column>
      </el-table>
      <div class="fooer_box">
        <div></div>
        <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="countList"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { pinT, xunJian } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { fun_date } from '@/assets/js/videoTab.js'
export default {
  data: function () {
    return {
      shuju: {
        GZAll: '2020',
        GZTODAY: '707',
      },
      currentPage: 1,
      pageSize: 10,
      contractList: [],
      countList: 0,
      // 机构
      jgmcOptions: [],
      contractDialogVisible: false, // 详情
      dialogVisibleDetele: false, // 删除
      searchBox: {
        ssjg: '',
        xjsj: '',
      },
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      tableMessage: '',
      tableTimer: null,
      tiText1: '暂无数据', // 机构提示
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableMessage = tableMessageText
          this.contractList = []
          // this.countList = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.getContractList()
    // 获取所属机构
    this.getMechanism()
  },
  methods: {
    // 获取数据
    async getContractList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.getList(params)
    },
    // 获取机构
    async getMechanism() {
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`)
      if (res.code !== '0000') {
        this.jgmcOptions = []
        this.tiText1 = res.message
      } else {
        const a = JSON.stringify(res.data.list)
        const newCity = a.replace(/id/g, 'value')
        const cityList = newCity.replace(/jgmc/g, 'label')
        const cityList2 = cityList.replace(/jgbmmc/g, 'label')
        const c = cityList2.replace(/bmList/g, 'children')
        this.jgmcOptions = JSON.parse(c)
      }
    },
    handleSizeChange(e) {
      this.pageSize = e
      this.currentPage = 1
      this.searchBtn()
    },
    handleCurrentChange(e) {
      this.currentPage = e
      // this.pageSize = 10
      this.searchBtn()
    },
    addUser(title, scope) {
      if (title === '录入巡检单') {
        this.$router.push({
          name: 'addSystemInspection', // 路由
          params: {
            // 传递参数
            title: title,
          },
        })
      } else {
        this.$router.push({
          name: 'addSystemInspection', // 路由
          params: {
            // 传递参数
            title: title,
            content: scope,
          },
        })
      }
    },
    onSubmit() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    async searchBtn() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      const { ssjg, xjsj } = this.searchBox
      params.append('SSJG', ssjg)
      if (xjsj) {
        params.append('KSRQ', xjsj[0])
        params.append('JSRQ', xjsj[1])
      }
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.getList(params)
    },

    async getList(params) {
      const { data: res } = await this.$http.post(`${xunJian}xtxjd/selectXunJianDanQueShi`, params)
      if (res.code !== '0000') {
        const time = fun_date(-5)
        this.contractList = []
        this.tableMessage = res.message
        this.countList = 0
        this.searchBox.xjsj = [time.otherTime, time.currentTime]
      } else {
        const { KSRQ, JSRQ } = res.data
        this.countList = res.data.countList
        this.contractList = res.data.list
        this.searchBox.xjsj = [KSRQ, JSRQ]
      }
      // switch (res.code) {
      //   case '0000': // 操作成功
      //     this.countList = res.data.countList
      //     this.contractList = res.data.list
      //     break
      //   default:
      //     this.contractList = []
      //     this.tableMessage = res.message
      //     this.countList = 0
      //     break
      // }
      this.tableLoad = false // 表格加载中样式
    },
  },
}
</script>

<style lang="scss" scoped>
.card-row {
  height: 70px;
  line-height: 70px;
  margin: 15px 0 0 0 !important;
  padding: 0 !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: none;
  border-top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  border: none;
  .bg-purple {
    background: #fef0f0;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .public-content {
    display: flex;
    height: 100%;
    .iconfont {
      width: 40px;
      height: 40px;
      padding: 16px 15px 14px 20px;
    }
  }
  ul.card-ul {
    flex: 1;
    height: 100%;
    display: flex;
    flex: 2;
    li {
      height: 100%;
      flex: 1;
      display: table;
      div.contain {
        display: table-cell;
        vertical-align: middle;
        span {
          display: block;
          line-height: 20px;
          color: #7f7f7f;
          font-size: 12px;
          &:nth-child(1) {
            font-size: 24px;
            color: #666666;
            line-height: 33px;
          }
        }
      }
    }
  }
}
.addMargin {
  .formLine {
    // margin-top: 15px;
    float: left;
    .formLine_item {
      padding: 0;
      margin-bottom: 15px;
    }
  }
}
.addMargin:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.el-table {
  border: 1px solid #eaeaea;
  border-bottom: 0;
  .operation {
    display: inline-block;
    margin: 0 5px;
    height: 10px;
    border-left: 1px solid #b3b3b3;
  }
  .Btn_nan {
    padding: 0;
  }
  .usersNumber {
    cursor: pointer;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    position: relative;
  }
  .usersNumber:after {
    content: '...';
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10%;
    height: 1.8em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  }
}
.fooer_box {
  height: 48px;
  line-height: 47px;
  padding: 0 15px;
  box-sizing: border-box;
  border-top: none;
  border: 1px solid #eaeaea;
  border-top: 0;
  display: flex;
  justify-content: space-between;
  .el-pagination {
    padding: 6px 5px;
  }
}
.delete {
  color: #f56c6c;
}
.dialogText {
  font-size: 14px;
  color: #333;
  .star {
    color: #f56c6c;
  }
  .contentFont {
    display: inline-block;
    width: 103px;
    color: #7a7a7a;
    text-align: right;
  }
  .lineHight .el-row {
    line-height: 40px;
    border: none;
  }
}
</style>
